<template>
  <div class="personnel-attendance">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="search-container">
        <div class="search-item">
          <label>身份证号：</label>
          <el-input
            placeholder="请输入身份证号"
            v-model="idNumber"
            @keydown.native.enter="handleSearch">
          </el-input>
        </div>
        <div class="search-item">
          <label>姓名：</label>
          <el-input
            placeholder="姓名模糊查询"
            v-model="name"
            @keydown.native.enter="handleSearch">
          </el-input>
        </div>
        <div class="search-item">
          <label>日期：</label>
          <el-date-picker
            v-model="searchDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="默认当天">
          </el-date-picker>
        </div>
        <div class="search-item">
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
        </div>
        <div class="search-item">
          <el-button type="primary" @click="handleRefresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </div>
        <div class="search-item">
          <el-checkbox :value="hasShow" @change="handleChange">
            不显示退场人员
          </el-checkbox>
        </div>
      </div>
      <div class="table-container">
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData">
          <el-table-column label="人员信息">
            <template slot-scope="scope">
              <div class="info">
                <img :src="scope.row.headPhoto" alt="">
                <div class="detail">
                  <p class="name">{{ scope.row.name }}</p>
                  <p>
                    <span v-if="scope.row.gender">{{ scope.row.gender }}</span>
                    <span>{{ setAge(scope.row.birthday) }}岁</span>
                    <span>{{ scope.row.nation }}</span>
                    <span>{{ scope.row.birthPlace }}</span>
                  </p>
                  <p>{{ scope.row.idNumber }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="详细信息">
            <template slot-scope="scope">
              <div class="detail-info">
                <p><span>班组：</span>{{ scope.row.role }}</p>
                <p><span>工种：</span>{{ scope.row.job }}</p>
                <p><span>联系方式：</span>{{ scope.row.phone }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="考勤日期">
            <template slot-scope="scope">
              <div class="detail-info">
                <p><span>进场：</span>{{ scope.row.firstEnterTime }}</p>
                <p><span>离场：</span>{{ scope.row.lastOutTime }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="200"></el-table-column>
          <el-table-column prop="num" label="出勤次数" width="200"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <i v-if="hasTableDetail" class="iconfont iconchakan" @click="handleLook(scope.row)"></i>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>

    <!--新增/编辑人员信息弹框-->
    <personnel-info-model
      :visible="visible"
      :formData="formData"
      :type="type"
      @cancel="visible = false">
    </personnel-info-model>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import personnelInfoModel from '@/components/project/personnel/personnelInfoModel';

// 人员考勤
export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '人员管理',
        },
        {
          name: '人员考勤'
        }
      ],
      // 身份证
      idNumber: '',
      // 姓名
      name: '',
      // 开始时间
      beginDay: '',
      // 截止时间
      endDay: '',
      hasShow: false,
      // 是否搜索
      hasSearch: false,
      searchDate: '',
      tableLoading: false,
      // 列表数据
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      visible: false,
      // 人员信息数据
      formData: {},
      type: 'detail',
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    // 当前参数所需时间
    paramDate() {
      return this.searchDate || this.$moment().format('YYYY-MM-DD');
    }
  },
  watch: {
    paramDate: {
      immediate: true,
      handler(val) {
        if (val) {
          const [year, month] = this.paramDate.split('-');
          const checkMonth = month >= 12;
          const nextMonth = checkMonth ? '01' : Number(month) + 1;
          const nextYear = checkMonth ? Number(year) + 1 : year;
          const endTime = new Date(`${nextYear}-${nextMonth}`).getTime();
          const nextDate = new Date(endTime - 24 * 3600000).getDate();
          this.beginDay = `${year}-${month}-01`;
          this.endDay = `${year}-${month}-${nextDate >= 10 ? nextDate : `0${nextDate}`}`;
        }
      }
    }
  },
  created() {
    this.getTableData();
  },
  components: {
    Breadcrumb,
    personnelInfoModel
  },
  methods: {
    /**
     * 获取列表数据
     * @param options {?Object} 请求参数
     */
    async getTableData(options = {}) {
      const hasSearch = !!(this.hasSearch && (this.name || this.idNumber));
      const params = {
        project_id: this.projectId,
        date: this.paramDate,
        page: String(this.pageNo),
        limit: String(this.pageSize)
      };
      if (hasSearch) {
        delete params.date;
        params.begin_day = this.paramDate;
        params.end_day = this.paramDate;
        if (this.name) params.name = this.name;
        if (this.idNumber) params.idNumber = this.idNumber;
      }
      this.tableLoading = true;
      const { success, data } = hasSearch
        ? await this.$Model.getAtdsListSearch(params)
        : await this.$Model.getAllAtdsList(params);
      this.tableLoading = false;
      if (success && data.data) {
        const { count, attendance, workers_info } = data.data;
        this.total = count;
        this.tableData = attendance || workers_info || [];
      }
    },
    /**
     * 设置年龄
     * @param birthday {String} 出⽣⽇期
     */
    setAge(birthday) {
      const currentTime = new Date().getTime();
      const birthTime = new Date(birthday).getTime();
      const year = (currentTime - birthTime) / 365 / 24 / 3600000;
      return Math.floor(year);
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.tableLoading = false;
      this.name = '';
      this.searchDate = '';
      this.idNumber = '';
      this.tableData = [];
    },
    // 搜索
    handleSearch() {
      this.hasSearch = true;
      this.getTableData();
    },
    handleRefresh() {
      this.hasSearch = false;
      this.clear();
      this.getTableData();
    },
    // 是否显示退场人员
    handleChange(val) {
      this.hasShow = val;
    },
    // 查看
    handleLook(data) {
      this.formData = data;
      this.visible = true;
    },
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .personnel-attendance {
    width: 100%;
    height: 100%;
    background: $mainBg;
    color: #fff;
    position: relative;
    .breadcrumb {
      width: 100%;
      height: 30px;
      /deep/ .breadcrumb-comp {
        height: 30px;
        border: none;
      }
    }
    main {
      width: 100%;
      height: calc(100% - 40px);
      .search-container {
        width: 100%;
        height: 50px;
        padding-left: 20px;
        margin: 20px 0;
        .search-item {
          height: 100%;
          float: left;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 20px;
          label {
            width: 120px;
            text-align: right;
            color: #fff;
          }
          i {
            font-size: 16px;
          }
        }
      }
      .table-container {
        width: 100%;
        height: calc(100% - 80px);
        background-color: $mainBg;
        border-radius: 10px;
        position: relative;
      }
      .table-content {
        height: calc(100% - 60px);
        /deep/ .el-table__body-wrapper {
          overflow-y: auto;
          height: 100%;
          padding-bottom: 30px;
        }
        .info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            display: inline-block;
            width: 80px;
            height: 80px;
            margin-right: 15px;
          }
          .detail {
            .name {
              padding: 5px 0;
              font-size: 16px;
              font-weight: bold;
            }
            p span {
              margin-right: 10px;
            }
          }
        }
        .detail-info {
          p {
            padding: 3px 0;
            span {
              color: $mainColor;
            }
          }
        }
        .iconfont {
          cursor: pointer;
        }
      }
    }
  }
</style>
